<template>
  <div class="income-page">
    <div class="income-page-info" ref="info">
      <div class="tit">总收益：</div>
      <div class="count">
        <i>￥</i>
        {{userInfo.inCome}}
      </div>
    </div>
    <Pad class="income-page-list" :style="listStyle">
      <van-tabs v-model="active">
        <van-tab title="献浆">
          <pulp />
        </van-tab>
        <van-tab title="邀请">
          <related/>
        </van-tab>
      </van-tabs>
    </Pad>
  </div>
</template>

<script>
import Pad from "@/components/pad";
import noData from "@/components/noData";
import { incomeList } from "@/api/income";
import { mapGetters } from "vuex";
import store from "@/store";

import pulp from "./pulp";
import related from "./related";
export default {
  data() {
    return {
      active: 0,
      share: "",
      link: "",
      listStyle: {
        height: 0
      },
      relatedQueryParams: {
        type: 1,
        current: 1,
        size: 10
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted() {
    this.listStyle = {
      height: `${window.outerHeight - this.$refs.info.offsetHeight}px`
    };
    setTimeout(() => {
      // tab容器高度
      var wrapper = document.querySelector(".van-tabs");
      var wrapperHeight = wrapper.offsetHeight;
      // tab切换高度
      var tab = document.querySelector(".van-tabs__wrap");
      var tabHeight = this.getStyle(tab, "height");
      var mbt = this.getStyle(tab, "margin-bottom");
      var content = document.querySelector(".van-tabs__content");
      content.style.height = `${wrapperHeight - tabHeight - mbt}px`;
    }, 20);
  },
  components: {
    Pad,
    pulp,
    related
  },
  methods: {
    getStyle(obj, attr) {
      if (obj.currentStyle) {
        return obj.currentStyle[attr];
      } else {
        return this.formatStyle(
          document.defaultView.getComputedStyle(obj, null)[attr]
        );
      }
    },
    formatStyle(px) {
      return parseInt(px.replace("px", ""));
    }
  }
};
</script>

<style lang='scss'>
.income-page {
  height: 100%;
  &-info {
    background: url(./img/bg.png) no-repeat;
    background-size: cover;
    height: 4.96rem /* 372/75 */;
    color: #fff;
    padding-top: 2.133333rem /* 160/75 */;
    padding-left: 0.4rem /* 30/75 */;
    .tit {
      font-size: 0.32rem /* 24/75 */;
      font-weight: 400;
      margin-bottom: 0.506667rem /* 38/75 */;
    }
    .count {
      font-size: 1.093333rem /* 82/75 */;
      font-weight: 400;
      i {
        font-size: 0.613333rem /* 46/75 */;
      }
    }
  }

  &-list {
    // margin-top: -0.933333rem /* 70/75 */;
    .van-tabs {
      height: 100%;
    }
  }

  .van-tabs__wrap {
    height: 1.6rem /* 120/75 */;
    border-radius: 0.213333rem /* 16/75 */;
    margin-bottom: 0.4rem /* 30/75 */;
    .van-tab {
      line-height: 1.6rem /* 120/75 */;
    }
    .van-tabs__line {
      background-color: #000;
      height: 0.053333rem /* 4/75 */;
    }
    .van-ellipsis {
      font-size: 0.4rem /* 30/75 */;
    }
  }
  .van-tabs__content {
    .item-title {
      font-size: 0.373333rem /* 28/75 */;
      color: rgba(51, 51, 51, 1);
      line-height: 0.533333rem /* 40/75 */;
    }
    .item-date {
      font-size: 0.32rem /* 24/75 */;
      font-weight: normal;
      color: #969799;
      line-height: 0.533333rem /* 40/75 */;
    }
    .van-collapse-item__content {
      padding: 0;
    }
    .van-collapse-item {
      margin-bottom: 0.4rem /* 30/75 */;
    }
  }
  .van-tab__pane,
  .van-collapse {
    height: 100%;
  }
}

.countClass {
  color: #ff4a50;
  font-size: 0.48rem /* 36/75 */;
}
.detailClass {
  font-size: 0.4rem /* 30/75 */;
  color: #ff4a50;
  line-height: 0.533333rem /* 40/75 */;
}
</style>
